<script setup>
import TinymceEditor from '../../components/tinymce/Tinymce.vue'
import { onMounted, ref, computed, watch, nextTick } from 'vue'
import { useMessage, useDialog } from 'naive-ui'
import { useRoute } from 'vue-router'
const $route = useRoute()
const electron = require('electron')
const { ipcRenderer } = electron
const placement = ref('top')
const drawerActive = ref(false)
const query = $route.query
const noteContent = ref([])
onMounted(() => {
  document.documentElement.setAttribute('data-theme', query.theme || 'light')
  document.body.setAttribute('data-note-theme', query.noteTheme || 'yellow')
  noteContent.value = window.storeApi.ipcRenderer.getStoreValue('noteWindowsParamsArr')
  nextTick(() => {
    // 确保TinymceEditor组件已挂载
    if (TinymceEditorRef.value) {
      const matchIngNoteWindowParams = noteContent.value.find((noteParam) => {
        return noteParam.id == noteId.value
      })

      if (matchIngNoteWindowParams) {
        TinymceEditorRef.value.setContent(matchIngNoteWindowParams.content)
      }
    }
  })
})

const TinymceEditorRef = ref()

const noteId = ref($route.path.split('/')[2])

// 监听抽屉状态是否变化
ipcRenderer.on('drawerActive:change:vue', () => {
  drawerActive.value = !drawerActive.value
})

// 监听主题颜色的改变
ipcRenderer.on('theme:change', (e, newVal) => {
  document.documentElement.setAttribute('data-theme', newVal)
  iconColor.value = newVal === 'light' ? '#222222' : '#c1c1c1'
  TinymceEditorRef.value.updateTinymceTheme()
})

// 定义颜色快
const colorBlocks = [
  { class: 'yellow', color: 'rgb(255, 230, 110)' },
  { class: 'green', color: 'rgb(161, 239, 155)' },
  { class: 'pink', color: 'rgb(255, 175, 223)' },
  { class: 'purple', color: 'rgb(215, 175, 255)' },
  { class: 'blue', color: 'rgb(158, 223, 255)' },
  { class: 'gray', color: 'rgb(224, 224, 224)' }
]

const selectBlock = ref(colorBlocks.findIndex((block) => block.class === query.noteTheme))
// 定义点击颜色快事件
const selectColor = (index) => {
  selectBlock.value = index
  noteId.value = $route.path.split('/')[2]

  // 发送改变便签颜色给主进程
  ipcRenderer.send('colorTheme:change:js', noteId.value, colorBlocks[index].class)

  // 改变便签的颜色
  document.body.setAttribute('data-note-theme', colorBlocks[index].class)

  drawerActive.value = !drawerActive.value
}

const iconColor = ref(query.theme === 'light' ? '#222222' : '#c1c1c1')

// 获取文本域的值
const tinyContent = computed(() => {
  return TinymceEditorRef.value?.getContent()
})

watch(
  () => tinyContent.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      // 发送改变便签内容给主进程
      ipcRenderer.send('content:change:js', noteId.value, newVal)
    }
  }
)
const dialog = useDialog()
const message = useMessage()
// 删除笔记
const deleteNote = () => {
  dialog.warning({
    title: '温馨提示',
    content: '你确定删除该笔记嘛',
    positiveText: '确定',
    negativeText: '不确定',
    onPositiveClick: () => {
      // 向主进程发送删除笔记
      ipcRenderer.send('note:delete', noteId.value)
      nextTick(() => {
        message.success('删除成功')
      })
    }
  })
}

// 弹出或者显示笔记列表
const showNoteList = () => {
  drawerActive.value = !drawerActive.value
  ipcRenderer.send('mainWindow:show')
}
</script>
<template>
  <div class="noteBox">
    <n-drawer
      v-model:show="drawerActive"
      :width="200"
      :height="200"
      :placement="placement"
      :trap-focus="false"
      :block-scroll="false"
    >
      <n-drawer-content>
        <div class="drawerContent">
          <div class="drawerContent_item">
            <div class="selectColor">
              <div
                v-for="(item, index) in colorBlocks"
                :key="index"
                :class="item.class"
                :style="{ backgroundColor: item.color }"
                @click="selectColor(index)"
              >
                <span v-if="selectBlock === index">✔️</span>
              </div>
            </div>
          </div>
          <div class="drawerContent_item" @click="showNoteList">
            <div class="toNoteList">
              <n-icon size="20" color="#989898">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 24 24"
                >
                  <g fill="none">
                    <path
                      d="M4.25 4A2.25 2.25 0 0 0 2 6.25v2.5A2.25 2.25 0 0 0 4.25 11h2.5A2.25 2.25 0 0 0 9 8.75v-2.5A2.25 2.25 0 0 0 6.75 4h-2.5zM3.5 6.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1-.75-.75v-2.5zM11.25 5a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5h-10zm0 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7zm-7 5A2.25 2.25 0 0 0 2 15.25v2.5A2.25 2.25 0 0 0 4.25 20h2.5A2.25 2.25 0 0 0 9 17.75v-2.5A2.25 2.25 0 0 0 6.75 13h-2.5zm-.75 2.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1-.75-.75v-2.5zM11.25 14a.75.75 0 0 0 0 1.5h10a.75.75 0 0 0 0-1.5h-10zm0 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7z"
                      fill="currentColor"
                    ></path>
                  </g>
                </svg>
              </n-icon>
              <span>便签列表</span>
            </div>
          </div>
          <div class="drawerContent_item" @click="deleteNote">
            <div class="deleteNote">
              <n-icon size="20" color="#eb3417">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 32 32"
                >
                  <path d="M12 12h2v12h-2z" fill="currentColor"></path>
                  <path d="M18 12h2v12h-2z" fill="currentColor"></path>
                  <path
                    d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z"
                    fill="currentColor"
                  ></path>
                  <path d="M12 2h8v2h-8z" fill="currentColor"></path>
                </svg>
              </n-icon>
              <span>删除笔记</span>
            </div>
          </div>
        </div>
      </n-drawer-content>
    </n-drawer>
    <div class="richTextBox">
      <div class="content">
        <TinymceEditor
          ref="TinymceEditorRef"
          class="mainContent"
          :eid="'note' + noteId"
        ></TinymceEditor>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.drawerContent {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-rows: repeat(3, 1fr);
  .drawerContent_item {
    width: 100%;
    .selectColor {
      display: grid;
      height: 100%;
      grid-template-columns: repeat(6, 1fr);

      .yellow,
      .green,
      .pink,
      .purple,
      .blue,
      .gray,
      .black {
        height: 100%;
        display: grid;
        justify-content: center;
        align-items: center;
        span {
          text-align: center;
          color: black;
        }
        &:hover {
          filter: brightness(80%);
        }
      }
    }
  }
  .toNoteList,
  .deleteNote {
    user-select: none;
    height: 100%;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    padding: 15px 15px;
    color: var(--text-color);
    background-color: var(--note-dropdown-background);
    :deep(.n-icon) {
      margin-right: 20px;
    }

    &:hover {
      background-color: var(--note-dropdown-hover-background);
    }
  }
  .deleteNote {
    span {
      color: #eb3417;
    }
  }
}

.noteBox {
  width: 100%;
  height: 100%;
  background-color: var(--note-content-background);
  transition: all 0.5s;
}
.richTextBox {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    .mainContent {
      font-size: 18px;
      width: 100%;
      height: 100%;
      padding: 10px;
      color: var(--text-color);
      background-color: transparent;
      outline: none;
      b {
        font-weight: 700;
      }
    }
  }
}
:deep(.n-drawer-body-content-wrapper) {
  padding: 0 !important;
}
</style>
